<template>
  <div>
    <el-card class="box-card card-main" shadow="never">
      <div slot="header">
        <el-form
          :inline="true"
          :model="serchData"
          class="demo-form-inline"
          label-width="90px"
          label-position="right"
          size="mini"
        >
          <el-form-item label="用例名称：">
            <el-input v-model="serchData.name" placeholder="请输入用例名称" />
          </el-form-item>
          <el-form-item label="项目名称：">
            <el-select v-model="serchData.projectName" filterable placeholder="请选择项目名称">
              <el-option
                v-for="(item, index) in projects"
                :key="index"
                :label="item.projectName"
                :value="item.projectName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用例描述：">
            <el-input v-model="serchData.remark" placeholder="请输入用例描述" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchList">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <el-button size="mini" @click="addRow()">新增用例</el-button>
      </el-row>
      <el-table v-loading="loading" :data="dataList" border stripe size="small" style="width: auto">
        <el-table-column align="left" width="60px" label="ID">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column align="left" width="150px" label="用例名称">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column align="left" width="150px" label="项目名称">
          <template slot-scope="scope">{{ scope.row.projectName }}</template>
        </el-table-column>
        <el-table-column align="left" label="用例描述">
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column width="160" align="left" label="创建时间">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column width="180" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              style="padding: 3px 4px 3px 4px;margin: 1px"
              size="mini"
              @click="addRow(scope.row)"
            >修改</el-button>
            <el-button
              type="primary"
              style="padding: 3px 4px 3px 4px;margin: 1px"
              size="mini"
              @click="editStep(scope.row)"
            >编辑步骤</el-button>
            <el-button
              type="danger"
              style="padding: 3px 4px 3px 4px;margin: 1px"
              size="mini"
              @click="deleteRow(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.pageCount"
        @size-change="changePageSize"
        @current-change="changePageNum"
      />
      <!--新增、 编辑 -->
      <el-dialog
        :title="addOrEditForm.title"
        :visible.sync="addOrEditFormVisible"
        width="530px"
        @close="closeDialog('addOrEditForm')"
      >
        <el-form
          ref="addOrEditForm"
          label-width="90px"
          :model="addOrEditForm"
          size="small"
          :rules="rules"
        >
          <el-form-item label="用例名称" prop="name">
            <el-input v-model="addOrEditForm.name" auto-complete="off" placeholder="请输入用例名称" />
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <el-select v-model="addOrEditForm.projectName" filterable placeholder="请选择项目名称">
              <el-option
                v-for="(item, index) in projects"
                :key="index"
                :label="item.projectName"
                :value="item.projectName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用例描述" prop="remark">
            <el-input v-model="addOrEditForm.remark" auto-complete="off" placeholder="请输入用例描述" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog('addOrEditForm')">取消</el-button>
          <el-button
            size="small"
            type="primary"
            class="title"
            @click="submitForm('addOrEditForm')"
          >保存</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { requestTestCasePage, requestAddTestCase, requestUpdateTestCase, requestDelTestCaseById } from '@/api/testCase/ui'
import { successMessage } from '@/utils/message'

export default {
  data() {
    return {
      loading: false,
      projects: [],
      serchData: { name: '', projectName: '', remark: '' },
      pageInfo: { pageNum: 1, pageSize: 10, pageCount: 0 },
      dataList: [],
      addOrEditFormVisible: false, // 新增或者删除弹出框默认值
      rules: {
        projectName: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ]
      },
      addOrEditForm: {
        title: '',
        id: '',
        name: '',
        projectName: '',
        remark: ''
      }
    }
  },
  computed: {
    serchInfo: function() {
      const pageInfo = this.pageInfo
      const serchData = this.serchData
      pageInfo.serchData = serchData
      return pageInfo
    }
  },
  mounted() {
    this.getPageList()
    this.projects = this.$store.getters.projects
  },
  methods: {
    editStep(row) {
      this.$router.push({
        path: '/uiTest/testCase/step',
        query: {
          id: row.id
        }
      })
    },
    resetSearch() {
      // 重置搜索条件方法
      this.serchData = {}
    },
    searchList() {
      this.getPageList()
    },
    changePageSize(row) {
      // console.log(row)
      this.pageInfo.pageSize = row
      this.getPageList()
    },
    changePageNum(row) {
      this.pageInfo.pageNum = row
      this.getPageList()
    },
    addRow(row) {
      if (row) {
        this.addOrEditFormVisible = true
        this.addOrEditForm.title = '编辑用例'
        this.addOrEditForm.id = row.id
        this.addOrEditForm.name = row.name
        this.addOrEditForm.projectName = row.projectName
        this.addOrEditForm.remark = row.remark
      } else {
        this.addOrEditFormVisible = true
        this.addOrEditForm.title = '新增用例'
      }
    },
    deleteRow(row) {
      this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestDelTestCaseById(row).then(data => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getPageList()
        })
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '已取消删除'
        })
      })
    },
    submitForm(Visible) {
      this.$refs[Visible].validate((validate) => {
        // console.log(this.addOrEditForm.id)
        if (validate && Visible === 'addOrEditForm' && this.addOrEditForm.id) {
          // 编辑
          requestUpdateTestCase(this.addOrEditForm).then(data => {
            this.addOrEditFormVisible = false
            this.getPageList()
            successMessage('保存数据成功')
          })
        } else if (validate && Visible === 'addOrEditForm' && !this.addOrEditForm.id) {
          // 新增
          requestAddTestCase(this.addOrEditForm).then(data => {
            this.addOrEditFormVisible = false
            this.getPageList()
            successMessage('保存数据成功')
          })
        }
      })
    },
    closeDialog(Visible) {
      if (Visible === 'addOrEditForm') {
        this.$refs[Visible].resetFields()
        this.addOrEditFormVisible = false
        this.resetDialog()
      }
    },
    // 获取分页任务列表
    getPageList() {
      this.loading = true
      requestTestCasePage(this.serchInfo).then((result) => {
        this.dataList = result.list || []
        this.pageInfo.pageCount = result.total
        this.loading = false
      })
    },
    resetDialog() {
      this.addOrEditForm.id = ''
      this.addOrEditForm.name = ''
      this.addOrEditForm.projectName = ''
      this.addOrEditForm.remark = ''
    }
  }
}
</script>

<style scoped>
</style>
